<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Node;
use LowCode\Support\JsExp;
use LowCode\Traits\Props\HasDisplayDirective;

/**
 * Collapse 组件
 * @method static static make(mixed $children = null) Collapse组件
 */
class Collapse extends Naive
{
    use HasDisplayDirective;

    public function __construct(mixed $children = null)
    {
        parent::__construct();
        $this->children($children);
    }

    /**
     * 是否只允许展开一个面板
     * @param bool|JsExp $bool
     * @return $this
     */
    public function accordion(bool|JsExp $bool = true): static
    {
        return $this->prop('accordion', $bool);
    }

    /**
     * 箭头位置
     * @param string|JsExp $arrowPlacement 'left' | 'right'
     * @return $this
     */
    public function arrowPlacement(string|JsExp $arrowPlacement = 'left'): static
    {
        return $this->prop('arrow-placement', $arrowPlacement);
    }

    /**
     * 非受控模式下展开的面板 name。accordion 模式时不为数组
     * @param string|int|array|JsExp $defaultExpandedNames string | number | Array(string|number) | null
     * @return $this
     */
    public function defaultExpandedNames(string|int|array|JsExp $defaultExpandedNames): static
    {
        return $this->prop('default-expanded-names', $defaultExpandedNames);
    }

    /**
     * 受控模式下展开的面板的 name，accordion 模式时不为数组
     * @param string|int|array|JsExp $expandedNames string | number | Array(string|number) | null
     * @return $this
     */
    public function expandedNames(string|int|array|JsExp $expandedNames): static
    {
        return $this->prop('expanded-names', $expandedNames);
    }

    /**
     * 触发展开的区域，如果不想让某些区域触发展开，可以使用此属性
     * @param array|JsExp $expandedNames Array<'main' | 'arrow' | 'extra'>
     * @return $this
     */
    public function triggerAreas(array|JsExp $expandedNames): static
    {
        return $this->prop('trigger-areas', $expandedNames);
    }

    /**
     * 展开内容改变时触发的回调函数
     * @param string $event (expandedNames: Array(string|number) | string | number | null) => void
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onUpdateExpandedNames(string $event = "(expandedNames)=>{}", string $id = null, array $modifiers = []): static
    {
        return $this->event('update:expanded-names', jsFn($event, $id), $modifiers);
    }

    /**
     * 点击标题时触发的回调函数
     * @param string $event (data: { name: string | number, expanded: boolean, event: MouseEvent }) => void
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onItemHeaderClick(string $event = "(data)=>{}", string $id = null, array $modifiers = []): static
    {
        return $this->event('onItemHeaderClick',  jsFn($event, $id), $modifiers);
    }

    /**
     * 折叠面板的自定义图标 设置 slot arrow 内容
     * (props: { collapsed: boolean })
     * @param Node $node
     * @param array $params
     * @return $this
     */
    public function slotArrow(Node $node, array $params = ['collapsed']): static
    {
        return $this->addSlot($node, 'arrow', $params);
    }

    /**
     * 设置CollapseItem
     * @param string|JsExp|null $title
     * @param mixed|null $children
     * @return CollapseItem
     */
    public function item(string|JsExp $title = null,  mixed $children = null): CollapseItem
    {
        $item = new CollapseItem($title,$children);
        $this->children($item);
        return $item;
    }


}
